<template>
    <div class="book-wapper" style="background-color: #fff;margin-top: 20px">
        <div class="nav-list">
            <a-breadcrumb>
                <a-breadcrumb-item>图书列表</a-breadcrumb-item>
                <a-breadcrumb-item>图书详情</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <a-skeleton active :loading="loading" :paragraph="{rows: 24}" style="background-color: #fff;margin-top: 20px">
            <div class="book">
                <div class="book-img">
                    <img  :src="movieDetail.imageURLL" class="poster-img">
                </div>
                <div class="book-info">
                    <h1 class="title">{{movieDetail.bookTitle}}</h1>
                    <div class="user-txt">
                        <span class="label">作者：</span>
                        <span class="txt">{{movieDetail.bookAuthor}}</span>
                    </div>
                    <div class="user-txt">
                        <span class="label">ISBN：</span>
                        <span class="txt">{{movieDetail.isbn}}</span>
                    </div>
                    <div class="user-txt">
                        <span class="label">出版时间：</span>
                        <span class="txt">{{movieDetail.yearOfPublication}}</span>
                    </div>
                    <div class="user-txt">
                        <span class="label">出版社：</span>
                        <span class="txt">{{movieDetail.publisher}}</span>
                    </div>
                    <div class="user-txt">
                        <span class="label">图书评分：</span>
                        <span class="txt">
                            <a-rate v-model="showscore" allow-half disabled/>
                        </span>
                    </div>
                    <div class="user-txt">
                      <span class="label">我的评分：</span>
                      <span class="txt">
                              <a-rate v-model="viewscore" allow-half/>
                          </span>
                    </div>
                    <div class="star-box">
                        <a-button type="primary" @click="handleStar(movieDetail.bookId)" :loading="btnLoad">
                            提交评分
                        </a-button>
                    </div>
                </div>
            </div>

            <div class="tj-label">
                图书推荐
            </div>
            <div style="padding: 10px;">
                <a-row>
                    <a-col :span="span" v-for="(movie, index) in movies" :key="index" style="padding: 1rem;">
                        <a-card class="movie-card" style="width: 200px" @click="detail(movie.bookId)">
                            <img :src="movie.imageURLM" style="width: 198px; height: 300px;"/>
                            <div class="movie-desc">
                                <div class="movie-title" :title="movie.bookTitle"><p>{{movie.bookTitle}}</p></div>
                                <p style="color: #aaa;margin-bottom: .2rem">作者：{{movie.bookAuthor}}</p>
                                <p>出版日期：{{movie.yearOfPublication}}</p>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
                <div style="text-align: right">
                    <a-pagination v-model="formData.curPage" :total="total" show-less-items @change="handleChangePage"/>
                </div>
            </div>
        </a-skeleton>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                movieDetail:{},
                btnLoad:false,
                viewscore:1,
                showscore:0,
                score:0,
                movies:[],
                span: '',
                loading: true,
                formData:{
                    curPage:1,
                    pageSize:8,
                    userId:''
                },
                total:0,
            }
        },
        components: {

        },
        props:{
            bookId:{
                type:String
            }
        },
        methods: {
            handleStar(bookId) {
                this.btnLoad = true;
                this.score = this.viewscore * 2;
                let user = JSON.parse(localStorage.getItem('USER'));
                this.$get('/books/bookScore?bookId='+bookId+'&userId='+user.userId+'&score='+this.score).then((r) => {
                  let data = r.data;
                  this.btnLoad = false;
                  if(data.status == '1') {
                    this.$message.success(data.message);
                    this.getDetailData(bookId);
                  } else {
                    this.$message.error(data.message);
                  }
                })

            },
            detail(id) {
                this.getDetailData(id);
                window.scroll(0,0)

            },
            getDetailData(id) {
                this.$get('/books/bookInfo?bookId='+id).then((r) => {
                    let data = r.data.data;
                    this.movieDetail = data;
                    this.showscore = this.movieDetail.score ? this.movieDetail.score : 0

                    let user = JSON.parse(localStorage.getItem('USER'));
                    this.formData.userId =user.userId;
                    this.getTjBookData();
                })
            },
            handleChangePage(current) {
                this.formData.curPage = current;
                this.getTjBookData();
            },
            getTjBookData() {
                this.$formPost('books/getBookListByAuthor',this.formData).then((data)=> {
                    this.loading = false;
                    if(data.status == 1){
                        this.movies = data.data.rows;
                        this.total = data.data.total;
                    }
                })
            }
        },
        mounted: function () {
            const that = this
            let val = window.innerWidth
            if (val > 1660) {
                this.span = 4
            } else if (val > 1250) {
                this.span = 6
            } else if (val > 1000) {
                this.span = 8
            } else if (val > 900) {
                this.span = 10
            } else {
                this.span = 12
            }
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
            this.getDetailData(this.bookId);
            this.$get('movie/coming').then((r) => {
                let data = JSON.parse(r.data.data)
                this.movies = data.moviecomings
            })

        }
    }
</script>
<style lang="less">
 .nav-list {
     padding: 20px 20px 5px 20px;
     font-size: 16px;
     cursor: pointer;
 }
 .tj-label {
     font-size: 20px;
     height: 20px;
     padding-left: 8px;
     border-left: 2px solid #13c2c2;
     line-height: 20px;
     margin-left: 20px;
     margin-top: 25px;
 }
.book {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px 20px;
    border-bottom: 1px solid #f2f2f2;
    .book-img {
        width: 400px;
        border: 1px solid #f2f2f2;
        .poster-img {
            width: 400px;
        }
    }
    .book-info {
        margin-left: 50px;
        .title {
            font-size: 20px;
            color: #323232;
            font-weight: bold;
        }
        .star-box {
            margin-top: 20px;
        }
        .user-txt {
            font-size: 18px;
            margin-top: 20px;
        }
        .label {
            color: #666;
        }
        .txt {
            color: #1a66b3;
        }
    }
}
 .movie-card {
     .ant-card-body {
         padding: 0 !important;
     }
     .movie-desc {
         padding: 1rem 0 0 0;
         text-align: center;
         .movie-title {
             font-size: .9rem;
             font-weight: 600;
             margin-bottom: .2rem;
             p {
                 margin-bottom: 0 !important;
             }
         }
     }
     &:hover {
         cursor: pointer;
         box-shadow: 4px 0 8px 0 rgba(29, 35, 41, 0.1);
     }
 }
 .movie-detail {
     p {
         margin-bottom: .4rem;
     }
     .poster {
         margin-right: -4rem;
         .poster-img {
             width: 198px;
             height: 300px;
         }
     }
 }
</style>
